<template>
  <div class="w-100 h-100">
    <div style="font-size: 20px;">
      <img src="../../../../assets/image/jianshe/title.png" alt="">
      质量整改情况
    </div>
    <div class="w-100 h-10 d-flex justify-content-end">
      <FakeLegend
          style="margin: auto 30px auto 0px"
          :color="['rgba(3, 230, 254, 1)']"
          :text="['数量']"
      >
      </FakeLegend>
      <lineLabel shapeColor="rgba(3, 230, 254, 1)" text="整改逾期率" style="marginRight: 30px"/>
      <lineLabel shapeColor="rgba(184, 235, 143, 1)" text="整改及时率"/>
    </div>
    <div class="w-100 h-90" >
      <div id="jin1" style="width: 100%; height: 100%"></div>
    </div>
  </div>

</template>

<script setup lang='ts'>
import * as echarts from "echarts";
import lineLabel from '@/components/project/lineLabel.vue';
import { useOptions } from "@/hook/useOptions";

const colorSingleList = [
  "rgba(3, 230, 254, 1)",
  "rgba(3, 230, 254, 1)",
  "rgba(184, 235, 143, 1)",
];
const props = defineProps({
  allData: {
    type: Object,
    default: () => ({}),
  },
  selectValue: {
    default: 2024,
  },
});
const jsonData:any = inject('jsonData')
const current = computed(() => {
  let data = [
    [],[],[]
  ];
  try {
    data = props.allData[props.selectValue];
  } catch (error) {}
  return data;
});
let myChart:any

watch(
  () => current.value,
  (val) => {
    if (val) {
      myChart.setOption({
        series: [
          { data: val[0] },
          { data: val[1] },
          { data: val[2] },
        ],
      });
    }
  }
);
onMounted(() => {
  let option :any= {
    color: colorSingleList,
    tooltip: {
      trigger: "axis",     
      backgroundColor: "rgba(28,64,81,0.7)",
      borderColor: "transparent",

        textStyle: {
          color: "white",
          fontSize: 20,
        },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "20%",
      top: "14%",
      containLabel: true,
    },
    //你的代码
    xAxis: {
      type: "category",
      data: useOptions().month,
      axisLabel: {
        fontSize: 20,
        color: "#667A8E",
        fontFamily: "OPPOSans-Regular",
      },
      axisTick: {
        lineStyle: {
          color: "#C7CBD1",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#C7CBD1",
        },
      },
    },
    yAxis: [
      {
        name:'%',

        type: "value",
        nameTextStyle: {
          color: "#8994A3",
          fontSize: 20,
        },
        axisLabel: {
          fontSize: 20,
          color: '#667A8E',
          formatter: "{value}" + '',
        },
        splitLine: { // 配置分割线
          show: true,
          lineStyle: {
            color: 'rgba(92, 225, 255, 0.5)', // 蓝色分割线
            type: 'solid' // 实线
          }
        }
      },
      {
        name:'个',
        type: "value",
        position: "right",
        splitLine: {
          show: false,
        },  nameTextStyle: {
          color: "#8994A3",
          fontSize: 20,
        },
        axisLabel: {
          fontSize: 20,
          color: '#667A8E',
        },
      }
    ],
    series: [
      {
        name: "数量",
        type: "bar",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color:'rgba(92, 225, 255, 1)', // 顶部颜色
            },
            {
              offset: 0.01,
              color:'rgba(92, 225, 255, 0)', // 顶部颜色
            },
            {
              offset: 1,
              color: 'rgba(92, 225, 255, 0.5)', // 底部颜色，透明
            },
          ]),
        },
        data: [],
        yAxisIndex: 0,
        barWidth: 20,
        label: {
          show: false,
          position: "top", // 标签显示在柱状图顶部
          fontSize: 14, // 标签字体大小
          color: "#DEDEDE",
        },
      },
      {
        name: "整改逾期率",
        type: "line",
        showSymbol: false,
        data: [],
        yAxisIndex: 1,
        color: 'rgba(3, 230, 254, 1)',
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(184, 235, 143, 0.8)' // 颜色渐变起始颜色
            }, {
              offset: 0.3,
              color: 'rgba(184, 235, 143, 0)' // 颜色渐变结束颜色
            }])
          }
        }

      },
      {
        name: "整改及时",
        type: "line",
        showSymbol: false,
        data: [],
        yAxisIndex: 1,
        color: '#B8EB8F',
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(184, 235, 143, 0.8)' // 颜色渐变起始颜色
            }, {
              offset: 0.3,
              color: 'rgba(184, 235, 143, 0)' // 颜色渐变结束颜色
            }])
          }
        }

      },
    ]
  };
//分割两侧的坐标轴
  let maxY = 0
  const computedYData = () => {

    let arr1:any = [],
        arr2:any = []
    option.series.map((item:any) => {
      if (item.type == "bar") {
        arr1.push(...item.data)
      } else {
        arr2.push(...item.data)
      }
    })
    let max1 = Math.max(...arr1)
    let max2 = Math.max(...arr2)
    let intervalY1 = Math.ceil(max1 / 6)
    let intervalY2 = Math.ceil(max2 / 6)
    if (max1 > max2) {
      maxY = max1
    } else {
      maxY = max2
    }
    option.yAxis.map((item:any, index:any) => {
      item.splitNumber = 6
      let interval
      if (index == 0) {
        interval = intervalY1
      } else {
        interval = intervalY2
      }
      item.interval = interval
      item.max = interval * 6
    })
  }
  computedYData()

//设置参考线
  let flag = false
  const setLine = (value:any) => {
    if (flag) {
      if (maxY < value) {
        option.yAxis[0].max = value
        option.yAxis[0].interval = Math.ceil(value/6)
      }
      option.series[0].markLine = {
        data: [
          {
            yAxis: value, // 自定义值
            label: {
              // 不显示基准线名称
              show: true,
              position: "insideEndTop",
              backgroundColor: "#FFECE8",
              color: "#E93838",
              padding: [2, 4, 0],
              height: 20,
              lineHeight: 20,
              fontSize: 12,
              formatter(params:any) {
                console.log(params)
                return "合格：" + params.value + "万元"
              },
            },
            lineStyle: {
              color: "#E93838",
            },
          },
        ],
      }
    } else {
      delete option.yAxis[0].max
      delete option.yAxis[0].interval
      option.series[0].markLine = {}
    }
  }
  flag = true
  setLine(750)
  myChart = echarts.init(document.getElementById("jin1") as HTMLElement);

  // setTimeout(() => {
    //取消参考线
    flag = false
    myChart.clear()
    setLine(750)
    myChart.setOption(option)
  // }, 10)

// myChart.setOption(option);
});
</script>

<style>

</style>